<template>
  <vxe-modal title="申请单详情" v-model="showApproveDetailForm" width="840" height="840"
             :before-hide-method="beforeHideMethod">
    <template v-if="approveDetailData">
      <el-descriptions title="服务基础信息"
                       class="apply-el-descriptions"
                       :column="2"
                       size="medium"
                       border
                       labelClassName="apply-detail-label-style">
        <el-descriptions-item label="资源编号">
          {{ approveDetailData['serviceId'] }}
        </el-descriptions-item>
        <el-descriptions-item label="资源名称">
          {{ approveDetailData['serviceName'] }}
        </el-descriptions-item>
        <el-descriptions-item label="提供单位">
          {{ organizationsFilter(approveDetailData['applyUserInfo']['organizations'], 'orgName') }}
        </el-descriptions-item>
        <el-descriptions-item label="联系方式">
          {{ approveDetailData['applyUserInfo']['phone'] }}
        </el-descriptions-item>
        <el-descriptions-item label="联系地址" :span="2">
          {{ organizationsFilter(approveDetailData['applyUserInfo']['organizations'], 'orgSite') }}
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="申请表单信息"
                       class="apply-el-descriptions"
                       :column="2"
                       size="medium"
                       border
                       labelClassName="apply-detail-label-style">
        <el-descriptions-item label="申请人">
          {{ approveDetailData['applyUserInfo']['userName'] }}
        </el-descriptions-item>
        <el-descriptions-item label="申请时间">
          {{ approveDetailData['createdTime'] }}
        </el-descriptions-item>
        <el-descriptions-item label="联系方式">
          {{ approveDetailData['applyUserInfo']['phone'] }}
        </el-descriptions-item>
        <el-descriptions-item label="联系地址">
          {{ organizationsFilter(approveDetailData['applyUserInfo']['organizations'], 'orgSite') }}
        </el-descriptions-item>
        <el-descriptions-item label="申请时长" :span="2">
          {{ durationFilter(approveDetailData['duration']) }}
        </el-descriptions-item>
        <el-descriptions-item label="附加信息" :span="2">
          {{ approveDetailData['additInfo'] }}
        </el-descriptions-item>
        <el-descriptions-item label="附加文件" :span="2">
          <el-button type="text" v-if="'0' !== approveDetailData['additFile']" size="small"
                     @click="downloadAdditFile(approveDetailData['additFile'])">
            {{ approveDetailData['additFileName'] }}
          </el-button>
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="申请结果"
                       class="apply-el-descriptions"
                       :column="2"
                       size="medium"
                       border
                       labelClassName="apply-detail-label-style">
        <el-descriptions-item label="审批结果">
          {{ applyStatusFilter(approveDetailData['applyStatus']) }}
        </el-descriptions-item>
        <el-descriptions-item label="审批时间">
          {{ approveDetailData['applyTime'] }}
        </el-descriptions-item>
        <el-descriptions-item label="审批人">
          {{ approveDetailData['applyUserInfo']['userName'] }}
        </el-descriptions-item>
        <el-descriptions-item label="审批单位">
          {{ organizationsFilter(approveDetailData['applyUserInfo']['organizations'], 'orgName') }}
        </el-descriptions-item>
        <el-descriptions-item label="单位地址" :span="2">
          {{ organizationsFilter(approveDetailData['applyUserInfo']['organizations'], 'orgSite') }}
        </el-descriptions-item>
        <el-descriptions-item label="到期时间" :span="2">
          {{ approveDetailData['mapProxyInfo']['expirationDate'] }}
        </el-descriptions-item>
        <el-descriptions-item label="服务编号">
          {{ approveDetailData['serviceId'] }}
        </el-descriptions-item>
        <el-descriptions-item label="服务名称">
          {{ approveDetailData['mapProxyInfo']['mapServiceName'] }}
        </el-descriptions-item>
        <el-descriptions-item label="服务地址" :span="2">
          {{ approveDetailData['mapProxyInfo']['mapProxyUrl'] }}
        </el-descriptions-item>
        <el-descriptions-item label="key" :span="2">
          {{ approveDetailData['mapProxyInfo']['mapKey'] }}
        </el-descriptions-item>
        <el-descriptions-item label="绑定域名/IP" :span="2">
          {{ approveDetailData['mapProxyInfo']['whiteHost'] }}
        </el-descriptions-item>
      </el-descriptions>
    </template>
  </vxe-modal>
</template>

<script>

/**
 * {订单详情}
 *
 * @author: 宋康
 * @date: 2023/1/16
 */
export default {
  name: "ApplyDetail",
  props: {
    isShow: {
      type: Boolean,
      required: true
    },
    approveDetail: {
      type: Object,
      required: true
    },
    durationDict: {
      type: Array,
      required: true
    },
    applyStatusDict: {
      type: Array,
      required: true
    },
  },
  data() {
    return {
      showApproveDetailForm: false,
      approveDetailData: null
    }
  },
  methods: {
    /**
     * {关闭事件}
     *
     * @author: 宋康
     * @date: 2023/1/9
     */
    beforeHideMethod() {
      this.$emit('update:isShow', false);
    }
  },
  mounted() {
  },
  computed: {
    durationFilter() {
      return (v) => {
        let dict = this.durationDict.filter(d => d['dictKey'] === v + '')
        return dict.length > 0 ? dict[0]['dictValue'] : '---';
      };
    },
    applyStatusFilter() {
      return (v) => {
        if (v) {
          let dict = this.applyStatusDict.filter(d => d['dictKey'] === v + '')
          return dict.length > 0 ? dict[0]['dictValue'] : '---';
        } else {
          return '---';
        }
      };
    },
    organizationsFilter() {
      return (v, item) => {
        return v ? v[0][item] : '';
      }
    }
  },
  watch: {
    isShow(n) {
      this.showApproveDetailForm = n;
    },
    approveDetail(n) {
      this.approveDetailData = n;
    }
  }
}
</script>


<style lang="scss" scoped>
.apply-el-descriptions {
  &:deep(.el-descriptions__header) {
    margin-bottom: 0;
  }

  &:deep(.apply-detail-label-style) {
    width: 100px;
  }
}
</style>